<template>
  <!-- 1和2是实现动画的两种方式 -->
  <!-- 1 -->
  <div style="width: 200px; margin: 0 auto">
    <div><button @click="title1 = !title1">按钮1</button></div>
    <transition appear>
      <h2 v-if="title1">hellow1</h2>
    </transition>
  </div>
  <!-- 2使用Animate.css动画库-->
  <div style="width: 200px; margin: 0 auto">
    <div><button @click="title2 = !title2">按钮2</button></div>
    <!-- enter-active-class的值通常是带In的值，leave-active-class的值通常是带Out的值，animate__animated这个前缀都要加上 animate__bounceInUp和animate__backOutDown是animate.css官网右侧鼠标悬浮复制的值-->
    <transition
      appear
      enter-active-class="animate__animated animate__bounceInUp"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <h2 v-if="title2">hellow2</h2>
    </transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
const title1 = ref(true);
const title2 = ref(true);
</script>

<style scoped>
/* backInUp backOutUp是animate.css官网中右侧的值 */
.v-enter-active {
  animation: backInUp 2s ease;
}

.v-leave-active {
  animation: backOutUp 2s ease;
  /* 下面这种写法也可以 */
  /* animation:backInUp 2s ease reverse  */
}

/* Animate.css可以通过class名修改animation的属性 */
.animate__animated {
  animation-duration: 8s;
}
</style>